<template>
  <div class="layout-container" :class="{'old': elder}">
    <div class="layout-section">
      <div>
        <top-header :show-elder="false" :auth-check="true" @setElder="setElderByChild"></top-header>

        <apply-notice :user-type="1"></apply-notice>

        <div class="com-contain">
          <div style="padding: 8px 0">
            <div class="form-label">
              <span class="required">*</span>企业名称
            </div>
            <div class="form-input-flex">
              <div class="form-input">
                <!-- <input type="text" placeholder="请输入"> -->
                <el-autocomplete class="layout-tab-search eraq-ent-inputer" v-model="formData.unitName"
                                 :fetch-suggestions="queryNames" placeholder="请输入企业名称"
                                 :trigger-on-focus="false" style="width: 100%;"/>
              </div>
              <a class="form-add" @click="comAdd"></a>
            </div>
            <div class="form-input-flex" v-for="(com, index) in comRows" :key="index">
              <div class="form-row">{{ com }}</div>
              <a class="form-cut" @click="comCut(index)"></a>
            </div>

            <upload-file ref="attr01" caption="工作证" file-type="01" :unid="this.formData.unid" fn="new"></upload-file>

            <upload-file ref="attr02" caption="单位介绍信" file-type="02" :unid="this.formData.unid" fn="new"></upload-file>

            <div class="form-label">
              <span class="required">*</span>联系电话
            </div>
            <div class="form-input">
              <input type="text" placeholder="请输入联系电话" v-model="formData.mobile"/>
            </div>
          </div>
        </div>
        <div>
          <div class="form-btns">
            <button class="primary" @click="doSave">提交申请</button>
            <button @click="$router.push({path: '/list'})">返回列表</button>
          </div>
        </div>

        <footer-right></footer-right>
      </div>
    </div>

    <footer-nav :active-index="-1"></footer-nav>
  </div>
</template>

<script>
import {apiReqEntNames, apiGetNew, apiSaveinner} from "@/api/apply";
import TopHeader from "@/components/topHeader";
import FooterRight from "@/components/footerRight";
import FooterNav from "@/components/footerNav";
import ApplyNotice from "@/components/applyNotice";
import {ajaxUtils} from "@/utils/lwUtils";
import UploadFile from "@/components/uploadFile";

export default {
  components: {UploadFile, ApplyNotice, FooterNav, FooterRight, TopHeader},
  data() {
    return {
      elder: false,
      comRows: [],
      formData: {
        unid: "", applyfrom: "", mobile: "", usertype: "", unitName: ""
      },
    }
  },
  created() {
    apiGetNew().then(res => {
      this.formData = res.data;
    }).catch(err=>{
      this.formData = {unid: "", applyfrom: "", mobile: "", usertype: "", unitName: ""};
      ajaxUtils.showErr(err);
    });
  },
  methods: {
    queryNames: function (queryString, cb) {
      apiReqEntNames(queryString, cb);
    },
    doSave: function () {
      if (this.formData.unitName === "" || this.formData.mobile === "") {
        this.$eraqDlg.warning("请填写企业名称及联系人电话");
        return;
      }
      if (this.$refs.attr01.fileList.length === 0 || this.$refs.attr02.fileList.length === 0) {
        this.$eraqDlg.warning("请上传相应证件及单位介绍信");
        return;
      }
      this.comRows.push(this.formData.unitName);

      apiSaveinner(this.formData.unid, this.comRows, 1, this.formData.mobile).then(res => {
        if (ajaxUtils.checkFail(res.code, res.msg)) {
          return;
        }
        this.$router.push({path: "/list"});
      }).catch((msg) => {
        this.$eraqDlg.error(msg === "" ? "数据保存错误" : msg);
      });
    },
    comAdd() {
      if (this.formData.unitName.length > 0 && this.comRows.length < 20) {
        this.comRows.push(this.formData.unitName)
        this.formData.unitName = ''
      }
    },
    comCut(index) {
      this.comRows.splice(index, 1);
    },
    //子组件调用方法，设置老年模式
    setElderByChild: function (elder) {
      this.elder = elder;
    },
  }
}
</script>

<style lang='scss' scoped>
@import "src/css/home";

.layout-section {
  background: #f2f3f9;
}

.van-uploader__input-wrapper {
  width: 100% !important;
}
</style>
